$('#top').load('top.html');
$('#bottom').load('bottom.html');
// ---

// banner图
let banner_wrap = document.querySelector('.banner-wrap');
let banner_imgs = document.querySelectorAll('.banner-img')
let banner_prev = document.querySelector('.banner-prev-btn')
let banner_next = document.querySelector('.banner-next-btn')
let banner_pagination = document.querySelector('.banner-pagination')
let pagination_ele = []; //声明一个空数组，用来承载分页
let banner_now_index = 0;
let banner_prev_index = 0;

banner_wrap.style.width = banner_imgs.length * 1920 + "px"

// 创建pagination之中的按钮;
let createPagBtn = () => {
    let pagination = document.createDocumentFragment();
    banner_imgs.forEach((ele, index) => {
        let i = document.createElement("i");
        index === banner_now_index ? i.className = "active" : "";
        pagination.appendChild(i);
        pagination_ele.push(i)
    })
    banner_pagination.appendChild(pagination);
}

// 透明写法
let bindEvent = () => {
    banner_next.onclick = function () {
        banner_prev_index = banner_now_index;
        if (banner_now_index === banner_imgs.length - 1) {
            banner_now_index = 0;
        } else {
            banner_now_index++;
        }
        changeSlide();
    }
    banner_prev.onclick = function () {
        banner_prev_index = banner_now_index;
        if (banner_now_index === 0) {
            banner_now_index = banner_imgs.length - 1;
        } else {
            banner_now_index--;
        }
        changeSlide();
    }
    pagination_ele.forEach((ele, index) => {
        ele.onmouseover = () => {
            if (index === banner_now_index) {
                return false
            };
            banner_prev_index = banner_now_index;
            banner_now_index = index;
            changeSlide();
        }
    })
}
let changeSlide = () => {
    banner_imgs.forEach((ele, index) => {
        ele.className = ele.className.replace(/\s?active-(now|prev)/g, "")
        pagination_ele[index].className = "";
    })
    banner_imgs[banner_now_index].className += " active-now";
    banner_imgs[banner_prev_index].className += " active-prev";

    banner_imgs[banner_now_index].style.opacity = 0;
    animate(banner_imgs[banner_now_index], {
        opacity: 1
    });
    banner_imgs[banner_prev_index].style.opacity = 1;
    animate(banner_imgs[banner_prev_index], {
        opacity: 0
    });
    pagination_ele[banner_now_index].className = "active";
}

// 调用区 ; 
createPagBtn();
bindEvent();

// 自动轮播
let banner_cont = document.querySelector('#banner-cont')
let banner_t = setInterval(banner_next.onclick, 3000)
banner_cont.addEventListener('mouseover', () => {
    clearInterval(banner_t)
})
banner_cont.addEventListener('mouseout', () => {
    banner_t = setInterval(banner_next.onclick, 3000)
})
// ---


// newProducts轮播图
let newProducts_wrap = document.querySelector('.newProducts-wrap')
let newProducts_move = document.querySelectorAll('.newProducts-list-move')
let np_prev_btn = document.querySelector('.np-prev-btn')
let np_next_btn = document.querySelector('.np-next-btn')
let np_now_index = 0;

newProducts_wrap.style.width = newProducts_move.length * 1090 + "px"

np_next_btn.onclick = function () {
    if (np_now_index === newProducts_move.length - 1) {
        return false
    } else {
        np_now_index++;
    }

    clearInterval(newProducts_wrap.t);
    animate(newProducts_wrap, {
        left: -np_now_index * 1090
    });
}
np_prev_btn.onclick = function () {
    if (np_now_index === 0) {
        return false
    } else {
        np_now_index--;
    }
    clearInterval(newProducts_wrap.t);
    animate(newProducts_wrap, {
        left: -np_now_index * 1090
    });
}

// ---

var index_list;
// 加载渲染数据 : 
$.ajax("http://localhost:8080/src/JSON/indexData.json")
    .then(function (res) {
        index_list = res.data;
        var index_html = index_list.map(function (item) {
            return `
                <div class="newProducts-list">
                  <div class="newProducts-img">
                      <img src="${item.src}">
                  </div>
                  <div class="newProducts-list-bottom">
                  <h4>${item.title}...</h4>
                  <span>&nbsp;￥${item.price}</span>
                  </div>
              </div>
              `
        }).join("");
        $('.newProducts-list-move').append(index_html);
    })


const contentBox = document.querySelector('.content')
getGoodsList()
async function getGoodsList() {

    const obj = {
        __timestamp: new Date().getTime(),
        sortType: '0',
        descSorted: 'false',
        subCategoryId: '109274000',
        deliveryAreaId: '0',
        categoryId: '1005000'
    }

    pAjax({
        url: '/xmzlists',
        data: querystringify(obj),
        dataType: 'json',
    }).then(ress => {
        // console.log(ress.data.itemList);
        var indexlist = ress.data.itemList

        if (indexlist[0].itemTagList != '') {
            console.log(indexlist[0].itemTagList[0].name); //七夕特惠
        }
        console.log(indexlist[2].id);

        // 3-5. 渲染商品列表
        let str = ''

        indexlist.forEach(item => {
            if (item.counterPrice == null) {
                item.counterPrice = ''
            } else {
                item.counterPrice = '￥' + item.counterPrice
            }
            if (item.itemTagList == '') {
                item.itemTagList = [{
                    name: '特惠'
                }]
            }
            str += `
		<li>
            <a href="./detail.html">
                <div class="show">
                    <img data-id="${ item.id }" src="${ item.listPicUrl }">
                </div>
                <div class="info">
                    <p> ${ item.itemTagList[0].name } </p>
                    <p class="title">${ item.name }</p>
                    <p class="price">
                        <span class="current"> ${ '￥' +item.retailPrice } </span>
                        <del class="old"> ${ item.counterPrice } </del>
                    </p>
                    <p>${ item.simpleDesc }</p>
                </div>
            </a>
		</li>`
        })

        contentBox.innerHTML = str
    })
}